<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="cabc">
        <header>
            <img src="@/assets/logo.png" class="logo">
            <div class="topbar">
                <div class="links">
                    <div class="link-box">
                        <router-link class="link" to="/">首页</router-link>                        
                    </div>
                    <div class="link-box">
                        <router-link class="link" to="/overview">概况</router-link>
                    </div>
                    <div class="link-box">
                        <router-link class="link" to="/functions">功能</router-link>
                    </div>
                    <div class="link-box">
                        <router-link class="link" to="/achievement">成果</router-link>
                    </div>
                    <div class="link-box">
                        <router-link class="link" to="/team">团队</router-link>
                    </div>
                    <div class="link-box">
                        <router-link class="link" to="/source">数据来源</router-link>
                    </div>
                </div>
            </div>
        </header>

        <router-view></router-view>
        <footer>
            <span>版权所有©2022 大连理工大学 备案号</span>
        </footer>
    </div>
</template>

<script>

export default{
}
</script>

<style scoped>
.logo{
    display: block;
    width: 80%;
    min-width: 300px;
    max-width: 556px;
    margin: 10px 10%;
}
.topbar{
    background-color: #333333;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
}

.links{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: auto auto;
    height: 100%;
}

.link-box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* background-color: blue; */
}
.link-box :hover{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: brown;
    transition: 0.2s;
    /* border-radius: 5px; */
}

.link{
    font-weight: 600;
    font-size: large;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    text-decoration: none;
    line-height: 50px;
    height: 100%;
}



</style>